<template>
    <div class="warp">
        <div class="top">
            <h1>{{titles[params.typeStatus-1]}}</h1>
            <div class="top-info">
                <div>
                    <p>评审开始时间:<span>{{startTime}}</span></p>
                    <p>评审结束时间:<span>{{endTime}}</span></p>
                </div>
                <p>剩余票数/限投票数:<span>{{ticket.remaining}}/{{ticket.expertsNum}}</span></p>
            </div>
        </div>
        <div class="content">
            <div class="minTitle">
                <div class="flag"></div>
                <div class="text">{{ roundsTitle }}</div>
            </div>
            <div class="container">
                <div class="nav-fl">
                    <p :class="{active:index == tabsNavActive}"
                       v-for="(item,index) in tabsNav"
                       @click="handleTabsNav(index)"
                       :key="item"
                    >{{item}}</p>
                </div>
                <div class="content-table">
                    <el-table
                            :data="tableData"
                            border
                            size="small"
                            height="300"
                            style="width: 100%"
                            :row-class-name="tableRowClassName"
                            header-row-class-name="table-header">
                        <el-table-column
                                prop="name"
                                label="姓名"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="participatingTitle"
                                label="参评职称"
                                align="center">
                        </el-table-column>
<!--                        <el-table-column-->
<!--                                prop=""-->
<!--                                label="业绩预警结果"-->
<!--                                align="center">-->
<!--                            <template slot-scope="scope">-->
<!--                                <span v-if="scope.row.postResult == 1">审核通过</span>-->
<!--                                <span v-else>审核未通过</span>-->
<!--                            </template>-->
<!--                        </el-table-column>-->
                        <el-table-column
                                label="操作"
                                align="center">
                            <template slot-scope="scope">
                                <el-button @click.stop="hanldeReviewsPreview(scope.row.userId)" type="primary" size="small" round>查看业绩</el-button>
                                <el-button :disabled="ticket.commit == '1'" v-if="scope.row.isVote" @click.stop="handleExpertUnVote(scope.row.id)" size="small" round>取消</el-button>
                                <el-button :disabled="ticket.commit == '1'" v-else @click.stop="handleVote(scope.row.id)" type="primary" size="small" round>投票</el-button>
<!--                                <el-button v-if="scope.row.isVote" @click.stop="handleExpertUnVote(scope.row.id)" size="small" round>取消</el-button>-->
<!--                                <el-button v-else @click.stop="handleVote(scope.row.id)" type="primary" size="small" round>投票</el-button>-->
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="commit-bar">
                <el-button :disabled="ticket.commit == '1'"
                           @click="handleCommitVote"
                           :loading="commitButtonIsLoading"
                           type="primary" round>签字确认
                </el-button>
                <img class="expert-autograph" :src="autographPic"/>
<!--                <el-button @click="handleCommitVote" :loading="commitButtonIsLoading" type="primary" round>签字确认</el-button>-->
            </div>
        </div>
        <el-dialog
            title="签字确认"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <div id="sign-pic">
                <img :src="signData" alt="">
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleCommit">提交结果</el-button>
            </span>
        </el-dialog>
        <reviews-preview ref="reviewsPreviewCont" v-if="openPreview" :openPreview.sync="openPreview" :resData="resData"></reviews-preview>
    </div>
</template>

<script>
    import Qs from 'qs'
    import {findExpertReviews, expertVote, expertUnVote, expertCommitVote, findDataByUserId,findImg} from '@/service/api'
    import { pluginBar } from '@/service/personalInfoDataProcessing'
    import reviewsPreview from '@/components/reviewsManage/reviewsPreview'
    export default {
        name: "expertReviews",
        data() {
            return {
                tabsNav:['高教','科研','工程','其他'],
                titles:['续任正高','晋升正高','续任副高','晋升副高','续任中职','晋升中职'],
                tabsNavActive:0,
                tableData:[],
                params:{},
                startTime:'',
                endTime:'',
                ticket:{},
                dialogVisible:false,
                signData:'',
                commitButtonIsLoading:false,
                isPlugin:false,
                isLaunchInitSuccess: false,
                openPreview:false,
                resData:{},
                autographPic:''
            }
        },
        created() {
            this.params = this.$route.params;
            this.inits(0);
            this.handleFindImg()
        },
        components:{
            reviewsPreview
        },
        computed:{
            roundsTitle:function () {
                let rounds = this.params.rounds.split('-');
                if(rounds[0] == 1){
                    return `第一轮第${rounds.length}次`
                }else {
                    return `第二轮第${rounds.length}次`
                }
            }
        },
        methods:{
            inits(index) {
                // console.log(this.params)
                this.params.lastCategory =  this.tabsNav[index],
                findExpertReviews(Qs.stringify(this.params)).then(res => {  //
                    if (res.code == 200) {
                        res.data.data.forEach((item,i)=>{
                            // console.log(item)
                            if(item.ticketIds !== undefined && item.ticketIds !== ''){
                                // console.log(JSON.parse(item.ticketIds))
                                JSON.parse(item.ticketIds).forEach(n=>{
                                    if(n == res.data.ticket.userId){
                                        item.isVote = true;
                                    }
                                })
                            }
                            if(i < Number(res.data.number)){
                                item.status = true
                            }
                        });
                        this.tableData = Object.assign([], res.data.data);
                        this.startTime = res.data.time.startTime;
                        this.endTime = res.data.time.endTime;
                        this.ticket = res.data.ticket;
                        // console.log(this.tableData)
                    } else {
                        console.log(res)
                    }
                });
            },
            tableRowClassName({row}) {
                if(row.status == '1'){
                    return 'warning-row';
                }
                return '';
            },
            handleTabsNav(index) {
                this.tabsNavActive = index;
                this.inits(index)
                // this.getTablsData()
                // console.log(this.tableParams)
            },
            handleVote(id) {
                if(this.ticket.remaining == 0){
                    this.$message.error('暂无剩余票数！');
                    return false;
                }
                let params = {id:id}
                expertVote(Qs.stringify(params)).then(res => {  //
                    if (res.code == 200) {
                        this.inits(this.tabsNavActive);
                        this.$message('投票成功！');
                    } else {
                        console.log(res)
                    }
                });
            },
            handleExpertUnVote(id) {
                let params = {id:id}
                expertUnVote(Qs.stringify(params)).then(res => {  //
                    if (res.code == 200) {
                        this.inits(this.tabsNavActive);
                        this.$message('取消成功！');
                    } else {
                        console.log(res)
                    }
                });
            },
            handleCommitVote() {
                this.commitButtonIsLoading = true;
                if(this.isPlugin){
                    pluginBar()
                }else {
                    this.launchInit()
                }
                // this.handleCommit()
            },
            handleCommit(){
                let params = this.params;
                params.pic = this.signData;
                expertCommitVote(Qs.stringify(params)).then(res => {  //
                    if (res.code == 200) {
                        this.dialogVisible = false;
                        this.inits(this.tabsNavActive);
                        this.$message('提交投票成功！');
                        this.handleFindImg()
                    } else {
                        console.log(res)
                    }
                });
            },
            handleFindImg() {
                findImg(Qs.stringify(this.params)).then(res => {  //
                    if (res.code == 200&&res.data) {
                        this.autographPic = res.data.pic;
                    }
                });
            },
            hanldeReviewsPreview(userId){ //预览
                let params = {
                    intfaceType: 'a',
                    userId: userId
                };
                findDataByUserId(Qs.stringify(params)).then(res => {  //筛选查询数据
                    if (res.code == 200) {
                        if(!res.data.msg){
                            this.resData = res.data;
                            this.resData.bottomOperation = false;
                            this.openPreview = true;
                        }else {
                            this.$message.error(res.data.msg);
                        }
                    }
                })

            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            launchInit() {//初始化签字版
                let message = {};
                message.messageType = 0;//业务类型  0->初始化设备  1->调用签批+指纹
                //注册init事件，向插件请求设备状态。
                let evt = document.createEvent("CustomEvent");
                evt.initCustomEvent('hanvon_initEvent', true, false, message);
                document.dispatchEvent(evt);
                //监听inited事件，获取当前设备状态。
                document.addEventListener("initedEvent",  this.handleSignInit );
                setTimeout(()=>{
                    if(!this.isLaunchInitSuccess){
                        this.$message({message: '签名设备初始化失败！',type: 'error'});
                        this.commitButtonIsLoading = false;
                    }
                },6000)
            },
            handleSignInit(evt){
                //监听initedEvent事件获取设备初始化状态。
                if (evt.detail) {
                    this.isPlugin = true;
                    pluginBar()
                } else {
                    this.$message({message: '签名设备初始化失败！',type: 'error'});
                    this.commitButtonIsLoading = false;
                }
                this.isLaunchInitSuccess = true;
            },
            handleSignData(evt) {
                //监听hanvonSigndataEvent事件获取签名数据值。
                var obj = evt.detail;
                // console.log(obj)
                if(obj.status == 1){
                    this.signData = obj.signdata;
                    setTimeout(()=>{
                        this.dialogVisible = true;
                    },300)
                }else if(obj.status == 0){
                    //直接点击签名窗口关闭按钮，status返回为0。
                    this.$message('签名取消！');
                }
                this.commitButtonIsLoading = false;
            }
        },
        mounted() {
            document.addEventListener("hanvonSigndataEvent",this.handleSignData);
        },
        beforeDestroy() { //在组件生命周期结束的时候销毁。
            document.removeEventListener('hanvonSigndataEvent', this.handleSignData);
            document.removeEventListener('initedEvent',this.handleSignInit);
        },
    }
</script>

<style scoped>
    .warp{
        height: 100%;
        min-width: 800px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 9px 8px 2px rgba(43, 103, 254, 0.05);
        border-radius: 5px;
        overflow: hidden;
    }
    .top{
        margin: 20px 38px;
    }
    .top h1{
        font-size: 28px;
        font-weight: bold;
        color: #ED9A57;
    }
    .top-info{
        display: flex;
        font-size: 15px;
        color: #333;
        font-weight: bold;
        justify-content: space-between;
        margin: 16px 0 12px;
    }
    .top-info > div{
        display: flex;
    }
    .top-info span{
        font-weight: bold;
        color: #31478F;
        margin-left: 12px;
    }
    .top-info p{
        margin-right: 46px;
    }
    .content{
        margin: 0px 38px;
        height: 100%;
    }
    .minTitle{
        display: flex;
        flex-direction: row;
        align-items: center;
        background: #31478f0d;
        padding: 14px 0px;
        border-top: solid 1px #f3f3f3;
        position:relative;
    }
    .minTitle>.flag{
        width: 3px;
        background: #31478F;
        margin: auto 22px;
        height: 18px;
    }
    .minTitle>.text{
        color: #31478F;
        font-weight: bold;
        font-size: 17px;
    }
    .container{
        display: flex;
        height: 100%;
        width: calc(100% - 66px);
        margin-top: 20px;
    }
    .nav-fl > p{
        width: 66px;
        height: 46px;
        line-height: 46px;
        text-align: center;
        font-weight: bold;
        color: #FFFFFF;
        font-size: 15px;
        opacity: 0.65;
        background: #31478F;
        border-radius: 8px 0px 0px 8px;
        margin-bottom: 1px;
        cursor: pointer;
    }
    .nav-fl > p.active{
        opacity: 1;
        background: linear-gradient(0deg, #0F2979 0%, #3155C7 100%);
    }
    .content-table{
        width: 100%;
        height: 100%;
        border-radius: 5px 5px 0px 0px;
    }
    /*.content-table >>> .el-table{*/
    /*    max-height: calc(100% - 310px);*/
    /*}*/
    .content-table >>> .table-header th {
        background: #E6EAEB !important;
        border: none;
    }
    .content-table >>> .table-header th div{
        font-weight:bold !important;
        color: #333;
    }
    .content-table >>> .el-table__empty-block{
        min-height: 147px;
    }
    .content-table >>> .el-button{
        padding: 8px 22px;
    }
    .commit-bar{
        position: absolute;
        bottom: 6%;
        left: 50%;
        margin-left: -78px;
    }
    .content-table >>>  .el-table__body-wrapper{
        height: calc(100% - 39px) !important;
        width: 100% !important;
        overflow-y: auto;
    }
    #sign-pic{
        width: 100%;
        height: 240px;
    }
    #sign-pic img{
        display: block;
        width: 80%;
        margin: 0 auto;
    }
    .user-name{
        cursor: pointer;
    }
    .expert-autograph{
        display: inline-block;
        width: 200px;
        margin-left:  100px;
        margin-bottom: -20px;
    }
    .content-table >>> .el-table .warning-row {
        background: #f5f5f5;
    }
</style>
